<template>
  <view class="page-container">
    <view class="search-wrapper">
      <input class="search-input" v-model="hospital" focus placeholder="请输入医院名称关键字" @input="onKeyInput" />
      <view class="list">
        <view class="list-item" v-for="item in list" :key="item.name" @tap="onSelected(item)">
          {{item.name}}
        </view>
      </view>
      <view v-if="list.length == 0" class="no-data">
        没有搜索到相关医院！
      </view>
    </view>
    <view class="page-footer">
      <button class="btn-save" :disabled="!selected.id" type="primary" @tap="onSave">保存</button>
    </view>
  </view>
</template>

<script>
  import {
    queryHospital
  } from '@/utils/api';
  export default {
    data() {
      return {
        hospital: '',
        list: [],
        selected: {
          id: '',
          name: ''
        }
      }
    },
    onShow() {
      this.queryHospital()
    },
    methods: {
      // 查询医院
      async queryHospital(params) {
        let res = await queryHospital(params);
        this.list = res.data || []
        // console.log(JSON.stringify(res))
      },
      // 键盘输入搜索医院
      onKeyInput(event) {
        let val = event.target.value
        this.selected = {
          id: '',
          name: ''
        }
        this.queryHospital({
          name: val
        })
      },
      // 选中医院
      onSelected(record) {
        this.hospital = record.name;
        this.selected = record;
        console.log(this.selected)
      },
      // 保存
      onSave() {
        uni.setStorageSync('hospital', this.selected);
        uni.navigateBack()
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/user.css");

  page {
    height: 100%;

  }

  .page-container {
    display: flex;
    height: 100%;
    overflow: auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .search-wrapper {
    flex: 1;
    width: 100%;
    padding-top: 30upx;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    flex-direction: column;
  }

  .search-input {
    background: #F4F4F4;
    height: 76upx;
    margin: 0 30upx;
    border-radius: 10upx;
    line-height: 76upx;
    text-indent: 20upx;
    font-size: 30upx;
    color: #333333;
  }

  .list {
    margin-top: 20upx;
    overflow: auto;
  }

  .list-item {
    color: #333333;
    padding-left: 30upx;
    font-size: 30upx;
    line-height: 60upx;
  }

  .no-data {
    text-align: center;
    font-size: 34upx;
    color: #999999;
    padding-top: 230upx;
  }

  .page-footer {
    flex-shrink: 0;
  }
</style>
